<template>
  <div ref="titleLine">
    <!-- 标题 -->
    <div v-if="$attrs.type === 'title'"
      :style="{'color':$attrs.styleConfig.color,'font-size':`${$attrs.styleConfig.fontSize}px`,'text-align':$attrs['content-position']}">
      {{$attrs.content}}
    </div>
    <!-- 分割线 -->
    <div v-else class="el-divider el-divider--horizontal"
      :style="{'background-color':$attrs.styleConfig.color,'margin-top':`${$attrs.styleConfig.marginTop}px`,'margin-bottom':`${$attrs.styleConfig.marginBottom}px`}">
      <div :class="textClass" :style="{'color':$attrs.styleConfig.color}">{{$attrs.content}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TitleLine',
    data() {
      return {}
    },
    computed: {
      textClass() { //分割线样式
        return {
          'el-divider__text': true,
          'is-left': this.$attrs['content-position'] === 'left',
          'is-center': this.$attrs['content-position'] === 'center',
          'is-right': this.$attrs['content-position'] === 'right',
        }
      }
    },
    mounted() {
      this.$refs.titleLine.parentElement.style.marginLeft = '0px'
    }
  }
</script>